<template>
    <div class="weatherCanvas" :id="echartsId" ></div>
</template>

<script>


  let echarts = require("echarts");
  export default {
    props:{
      "temperature":{
        default(){
          return 0;
        }
      },
      "proportion":{
        default(){
          return 0;
        }
      }
    },
    name: "weatherBg",
    data(){
      let r = this.proportion;
      return {
        Echarts:null,
        echartsId:"echarts"+parseInt(new Date().getTime()+Math.random()*1000000),
        option:{
          title: {
            text: '',
            subtext: ''
          },
          grid:{
            left:0,
            top:0,
            width:"100%",
          },
          outline:{
            show:false
          },
          series: [{
            // data:[this.temperature],
            name:this.temperature,
            outline: {
              show: false
            },
            amplitude: 3 + "%",
            waveAnimation: false,
            animationDuration: 0,
            animationDurationUpdate: 0,
            type: 'liquidFill',
            data: [r-.05+.2,r,r+0.5+.2],
            color: ['rgba(84,93,235,1)', 'rgba(84,93,235,.8)', 'rgba(84,93,235,.6)'],
            shape:"container", tooltip: {show: true}, silent:true,
            // itemStyle: {normal: {opacity: 0.6}, emphasis: {opacity: 0.9}},
            outlin:{show:false},
            backgroundStyle: {
              color:"none",
            },
            itemStyle:{
              shadowBlur:0
            },
            label: {
              normal: {
                position:["50%","30%"],
                formatter: function(data){
                  return data.seriesName+"C°"
                },
                textStyle: {
                  top:10,
                  fontSize: 28
                }
              }
            },
          }]
        },
        defaultEcharts:{
          title: {
            text: '',
            subtext: ''
          },
          grid:{
            left:0,
            top:0,
            width:"100%",
          },
          outline:{
            show:false
          },
          series: [{
            // data:[this.temperature],
            name:this.temperature,
            outline: {
              show: false
            },
            amplitude: (3+Math.random()*30) + "%",
            waveAnimation: false,
            animationDuration: 0,
            animationDurationUpdate: 0,
            type: 'liquidFill',
            data: [r-.05,r,r+0.5],
            color: ['rgba(84,93,235,1)', 'rgba(84,93,235,.8)', 'rgba(84,93,235,.6)'],
            shape:"container", tooltip: {show: true}, silent:true,
            // itemStyle: {normal: {opacity: 0.6}, emphasis: {opacity: 0.9}},
            outlin:{show:false},
            backgroundStyle: {
              color:"none",
            },
            itemStyle:{
              shadowBlur:0
            },
            label: {
              normal: {
                position:["50%","30%"],
                formatter: function(data){
                  return data.seriesName+"C°"
                },
                textStyle: {
                  top:10,
                  fontSize: 28
                }
              }
            },
          }]
        }
      }
    },
    created(){
      // this.defaultEchart();
      // setTimeout(() => {
      //   this.loadEchartResize(this.con_w);
      // }, 200);
      this.$nextTick(()=>{
        // setTimeout(()=>{
          // console.log(111)
          this.Echarts = echarts.init(document.getElementById(this.echartsId));
          this.load();
        // },200)
      })

      this.$Bus.$on("onresize",()=> {
        // console.log("WeatherResize");
        // this.load();
        this.Echarts.resize();
        // this.load();
      })
    },
    watch:{
      proportion(){
        // console.log("proportion",this.proportion,this.temperature)
        this.load();
      },
      temperature(){
        this.load();
      }
    },
    methods:{
      load(){

          this.option.series[0].name=this.temperature;
          let proportion = parseInt(this.proportion*0.8)/100+.25;
          this.option.series[0].data=[proportion-0.05,proportion,proportion+0.05]
          this.Echarts.setOption(this.option,true);
        // console.log("222")
      },
      defaultEchart() {
        this.option.series = [];
        this.Echarts.setOption(this.defaultEcharts,true);
      },
      loadEchartResize(w) {
        let opts = { width: w/2 - 10 };
        this.Echarts.resize(opts);
      }
    }
  }
</script>

<style scoped>
  .weatherCanvas{
    width: 100%;
    height: 100%;
  }
</style>